<template>
	<view class="my_order">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav_item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
				{{ item.text }}
			</view>
		</view>
		<view class="order_product_info">
			<ShoppingCartCard :cartCheaked='cartCheaked' :dataList='dataList'></ShoppingCartCard>
		</view>
	</view>
</template>

<script>
	import ShoppingCartCard from '@/components/ShoppingCart/ShoppingCartCard/index.vue';
	
	export default {
		data() {
			return {
				tabCurrentIndex: 0, // 切换索引
				cartCheaked: 0, // 是否显示复选框
				navList: [{ // nav列表
					text: '全部',
					orderList: []
				}, {
					state: 1,
					text: '待付款',
					orderList: []
				}, {
					state: 2,
					text: '待确认',
					orderList: []
				}, {
					state: 3,
					text: '已完成',
					orderList: []
				}],
				dataList: [
					{
						"id": 18,  // 订单ID
						"order_number": "YG2021090216292338047", // 订单号
						"goods_name": "玉器1", //商品名称
						"price": "2000",  //商品价格
						"image": "/uploads/20210901/9d377b10ce778c4938b3c7e2c63a229a.jpg",   //商品图片
						"status": 1,   // 订单状态（1：待支付，2：待确定，3：已完成，4：已超时，5：已取消）
						"create_time": 1630571363,  // 订单生成时间（时间戳）
						"create_time_text": "",
						"update_time_text": ""
					},
					{
						"id": 18,  // 订单ID
						"order_number": "YG2021090216292338047", // 订单号
						"goods_name": "玉器1", //商品名称
						"price": "2000",  //商品价格
						"image": "/uploads/20210901/9d377b10ce778c4938b3c7e2c63a229a.jpg",   //商品图片
						"status": 2,   // 订单状态（1：待支付，2：待确定，3：已完成，4：已超时，5：已取消）
						"create_time": 1630571363,  // 订单生成时间（时间戳）
						"create_time_text": "",
						"update_time_text": ""
					},
					
					{
						"id": 18,  // 订单ID
						"order_number": "YG2021090216292338047", // 订单号
						"goods_name": "玉器1", //商品名称
						"price": "2000",  //商品价格
						"image": "/uploads/20210901/9d377b10ce778c4938b3c7e2c63a229a.jpg",   //商品图片
						"status": 3,   // 订单状态（1：待支付，2：待确定，3：已完成，4：已超时，5：已取消）
						"create_time": 1630571363,  // 订单生成时间（时间戳）
						"create_time_text": "",
						"update_time_text": ""
					},
					{
						"id": 18,  // 订单ID
						"order_number": "YG2021090216292338047", // 订单号
						"goods_name": "玉器1", //商品名称
						"price": "2000",  //商品价格
						"image": "/uploads/20210901/9d377b10ce778c4938b3c7e2c63a229a.jpg",   //商品图片
						"status": 4,   // 订单状态（1：待支付，2：待确定，3：已完成，4：已超时，5：已取消）
						"create_time": 1630571363,  // 订单生成时间（时间戳）
						"create_time_text": "",
						"update_time_text": ""
					},
					{
						"id": 18,  // 订单ID
						"order_number": "YG2021090216292338047", // 订单号
						"goods_name": "玉器1", //商品名称
						"price": "2000",  //商品价格
						"image": "/uploads/20210901/9d377b10ce778c4938b3c7e2c63a229a.jpg",   //商品图片
						"status": 5,   // 订单状态（1：待支付，2：待确定，3：已完成，4：已超时，5：已取消）
						"create_time": 1630571363,  // 订单生成时间（时间戳）
						"create_time_text": "",
						"update_time_text": ""
					},
				]
			}
		},
		onLoad() {
			// 页面显示是默认选中第一个
			this.tabCurrentIndex = 0;
			this.getOrderList();
		},
		methods: {
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
				
			},
			//获取订单列表
			getOrderList() {
				let params = {
					page: 1,
					status: ''
				}
				this.$post(this.api.orderList,params).then(res => {
					console.log(res)
				}).catch(err =>{
					console.log(err)
				})
			}
		},
		components: {
			ShoppingCartCard
		}
	} 
</script>

<style lang="less" scoped>
	.navbar {
		display: flex;
		height: 80rpx;
		border-bottom: 1px solid #E5E5E5;
		position: relative;
		z-index: 10;
		.nav_item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30rpx;
			color: #000;
			position: relative;
			&.current {
				color: #D1A764;
				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #C5A36C;
				}
			}
		}
	}
	.order_product_info {
		padding: 0 20rpx;
	}
</style>
